<template>
	<div
		v-for="item in props.itemList"
		class="w-884px h-136px mt-3 cursor-pointer"
		@click="to(item.id)"
	>
		<div class="top">
			<div class="w-484px h-88px left">
				<div class="job-title">
					<span class="job-name">{{ item.jobName }}</span>
					<span class="job-area-wrapper">
						<span class="job-area">{{ item.address }}</span>
					</span>
				</div>
				<div class="job-info">
					<span class="salary">{{ item.salary }}</span>
					<ul class="tag-list">
						<li v-for="jobTagList in item.jobTagList">{{ jobTagList }}</li>
					</ul>
					<div class="info-public">杨先生<em>人事经理</em></div>
					<!--					<a href="javascript:;" ka="cpc_job_list_chat_1" class="start-chat-btn">立即沟通</a>&lt;!&ndash;&ndash;&gt;-->
				</div>
			</div>
			<div class="w-400px h-88px right">
				<div class="company-logo">
					<img v-if="item.companyImg !== null" :src="item.companyImg" />
					<img
						v-else
						src="https://img.bosszhipin.com/beijin/icon/894ce6fa7e58d64d57e7f22d2f3a9d18afa7fcceaa24b8ea28f56f1bb14732c0.png?x-oss-process=image/resize,w_100,limit_0"
					/>
				</div>

				<div class="company-info">
					<h3 class="company-name">
						<a href="/gongsi/9f45c31ee01888021Hd439q0EFc~.html">{{
							item.companyName
						}}</a>
					</h3>
				</div>
			</div>
		</div>
		<div class="bottom">
			<ul class="tag-list">
				{{
					item.tag
				}}
			</ul>
			<div class="info-desc">{{ item.welfare }}</div>
		</div>
	</div>

	<div class="page">
		<el-pagination
			@current-change="sendValue"
			layout="prev, pager, next"
			:total="props.query.total"
		/>
	</div>
</template>
<script setup lang="ts">
import { useRouter } from 'vue-router'
const router = useRouter()
const props = defineProps<{
	query: any
	itemList: any
}>()
// 定义 `emit` 函数
const emit = defineEmits(['queryItem'])

/**
 * 分页出发函数
 * @param val
 */
const sendValue = (val: number) => {
	props.query.page = val
	emit('queryItem', props.query)
}
/**
 * 详情页跳转
 * @param id
 */
function to(id: any) {
	router.push(`/itemInfo/${id}`)
}
</script>
<style scoped>
.page {
	margin-top: 20px;
	display: flex;
	justify-content: center;
	text-align: center;
}
.company-info {
	margin-left: 12px;
	float: left;
	.company-name {
		font-size: 16px;
		font-weight: 500;
		line-height: 22px;
		height: 22px;

		a {
			display: inline-block;
			color: #222;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			max-width: 196px;
			vertical-align: middle;
			transition: all 0.2s linear;
		}
	}
}

.company-tag-list {
	margin-top: 12px;
	height: 22px;
	overflow: hidden;
	max-width: 298px;

	li {
		display: inline-block;
		background: #f8f8f8;
		padding: 2px 8px;
		border-radius: 4px;
		font-size: 13px;
		font-weight: 400;
		color: #666;
		line-height: 18px;
	}
}

.top {
	width: 100%;
	height: 88px;
	background-color: #fbfbfb;
	display: flex;
	flex-wrap: nowrap;
}

.bottom {
	height: 48px;
	background-color: #f6faf9;
	padding: 15px 24px;
	background: linear-gradient(90deg, #f5fcfc, #fcfbfa);
	border-radius: 0 0 12px 12px;
	cursor: pointer;

	.tag-list {
		float: left;
		width: 390px;
		overflow: hidden;
		margin-right: 84px;
		margin-left: -8px;
		height: 18px;

		li {
			display: inline-block;
			position: relative;
			padding: 0 8px;
			font-size: 13px;
			font-weight: 400;
			color: #666;
			line-height: 18px;
			white-space: nowrap;
		}
	}

	.info-desc {
		float: left;
		width: 362px;
		font-size: 13px;
		font-weight: 400;
		color: #666;
		line-height: 18px;
		word-break: break-word;
		-ms-word-break: break-all;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
}

.left {
	padding: 16px 0 16px 24px;

	.job-title {
		display: inline-block;
		vertical-align: middle;
		font-size: 16px;
		font-weight: 500;
		color: #222;
		line-height: 22px;
		transition: all 0.2s linear;
		max-width: 460px;
	}

	.job-name {
		float: left;
		max-width: 172px;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.job-area-wrapper {
		float: left;
		margin-left: 12px;
		line-height: 22px;
	}

	.job-area {
		float: left;
		max-width: 214px;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.job-info {
		margin-top: 12px;

		.salary {
			font-size: 16px;
			font-weight: 500;
			color: #fe574a;
			line-height: 22px;
			float: left;
		}

		.tag-list {
			float: left;
			margin-left: 12px;
			max-width: 172px;
			height: 22px;
			overflow: hidden;
		}

		.tag-list {
			float: left;
			margin-left: 12px;
			max-width: 172px;
			height: 22px;
			overflow: hidden;

			li {
				padding: 2px 8px;
				float: left;
				background: #f8f8f8;
				border-radius: 4px;
				font-size: 13px;
				font-weight: 400;
				color: #666;
				line-height: 18px;
			}
		}
	}
}

.right {
	padding: 16px 24px 16px 10px;

	.company-logo {
		float: left;
		width: 56px;
		height: 56px;
		border-radius: 8px;
		overflow: hidden;
		border: 1px solid #f8f8f8;
	}
}
</style>
